<template>
    <div>
        <h2>{{ this.$route.query.name }}</h2>
        <div class="head">
            <el-button @click="back" size="small" type="info" class="el-icon-back">
                返回
            </el-button>
        </div>
        <template>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">

                <el-table-column prop="label" label="名称" width="120" show-overflow-tooltip>
                </el-table-column>
                <!-- <el-table-column prop="path" label="路径" width="120">
                </el-table-column> -->
                <!-- <el-table-column prop="type" label="类型" show-overflow-tooltip>
                </el-table-column> -->
                <el-table-column label="开启权限" align="center" show-overflow-tooltip>
                    <input disabled @click="my_isPaid" readOnly v-model="bool" style="width: 20px;height: 20px;" type="checkbox">
                </el-table-column>
            </el-table>
            
        </template>
    </div>
</template>

<script>
export default {
    name: 'List2',
    data() {
        return {
            bool:1,
            t:'菜单',
            tableData: [
                {
                    label:'',
                    name: '系统权限',
                    path: '#',
                    type: '菜单'
                },
                {
                    name: '系统权限1',
                    path: '#1',
                    type: '页面'
                },
                {
                    name: '系统权限1',
                    path: '#1',
                    type: '页面'
                },
                {
                    name: '系统权限',
                    path: '#',
                    type: '菜单'
                }
            ],
                multipleSelection: []
        }
    },
    created(){
        this.$axios({
            method:'get',
            url:'/systemManagement/roleCompany/findMenuListByRoleId',
            params:{
                id:this.$route.query.data.id
            }
        })
        .then(resp=>{
            console.log(resp.data.data);
            this.tableData=resp.data.data
        })
    },
    methods: {
        my_isPaid() {
            // if (this.bool == 0) {
            //     this.bool = 1 ;
                
            // } else {
            //     this.bool = 1
            // }
            this.bool = 1
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        back() {
            this.$router.push('roleList')
        },
        tableRowClassName({ row, rowIndex }) {
            if (row.path != '#') {
                return 'success-row';
            } else if (rowIndex != 100) {
                return 'success-row';
            }
            return '';
        }
    },

}
</script>

<style lang="less" scoped>
h2 {
    text-align: left;
    margin: 10px;
}

.head {
    display: flex;
    margin: 5px;
    padding: 10px;
    height: 30px;
    border-top: 5px solid gainsboro;
    border-radius: 5px;
    background-color: white;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>